<template>
  <!-- ref对象通常要加上Ref标识 -->
  <div ref="rootRef">
    <!-- 内容插槽 -->
    <slot></slot>
  </div>
</template>

<script type="text/ecmascript-6">
// https://better-scroll.github.io/docs/zh-CN/plugins/
import useScroll from './use-scroll'
import { ref } from 'vue'

export default {
  name: 'scroll',
  // scroll的props全都是BS配置项的属性
  props: {
    click: {
      type: Boolean,
      default: true
    },
    // 决定是否可以监听到向外派发的滚动事件 3就是只要滚动就派发
    probeType: {
      type: Number,
      default: 0
    }
  },
  // 在vue3中 定义自定义事件（向外派发），建议在组件对象中配置emits属性(代表自定义事件的名称)
  emits: ['scroll'],
  // setup(props)通过参数拿到props的值
  // setup第二个参数是一个对象，在对象中可以拿到emit这个方法,在钩子函数中当参数穿进去
  setup(props, { emit }) {
    const rootRef = ref(null)
    // 接收到返回的scroll实例，并将返回的实例再暴漏(return)出去，之后就可以通过scroll组件的实例，就可以访问到这个scroll变量了
    // 并通过这个变量拿到BS的实例了 通过在组件上添加ref拿到组件实例
    const scroll = useScroll(rootRef, props, emit)

    // 一定要return一个对象包含这个ref才会有效
    return {
      rootRef,
      scroll
    }
  }
}
</script>
